<template>
    <view class="order-item refund-item" v-if="data">
        <view class="order-item-top">
            <text class="order-desc-text">订单编号：{{ data.Sn }}</text>
            <text class="order-desc-text">下单时间：{{ data.AddTime }}</text>
        </view>
        <view class="order-item-main" @click="goOrderDetail">
            <view class="order-item-imgs" v-if="data.DetailList">
                <view class="img-item" v-for="(item, index) in data.DetailList.slice(0, 1)" :key="index">
                    <view class="order-name">{{ item.Name }}</view>
                </view>
            </view>
            <view class="flex">
                <view><text>详情</text><uni-icons type="arrowright"></uni-icons></view>
                <text class="order-kind" v-if="false">({{ data.DetailList.length }}种{{ getTotalNum() }}件)</text>
            </view>
        </view>
        <view class="order-item-price">
            <view class="order-price">
                <text>总计:</text>
                <text class="price-text"
                    >¥{{ (data.ProductPrice - data.CouponMoney + data.PostagePrice).toFixed(2) }}</text
                >
            </view>
            <button class="btn btn-main-hollow" @click="$refs.popReturnTip.open()">申请退款</button>
        </view>
        <uni-popup ref="popReturnTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>退款原因</text>
                </view>
                <view class="return-msg">
                    <card-cell-input
                        :showLabel="false"
                        ref="returnMsg"
                        :inputType="'text'"
                        placeholder="请输入退款原因"></card-cell-input>
                </view>
                <view class="action">
                    <button class="btn btn-gray" @click="cancelReturn">取消</button>
                    <button class="btn btn-success" @click="doReturn">提交</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import cardCellInput from "@/components/common/cell/card-cell-input.vue"
import { OrderRefundApplyExchange } from "@/service/api/order.js"
export default {
    components: {
        cardCellInput,
    },
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    methods: {
        ...mapMutations(["UP_RETURN_ORDER_VIEW"]),
        goOrderDetail() {
            let data = encodeURIComponent(JSON.stringify(this.data))
            this.easyGoTo("/pages_shop/packet/refund/good-list?data=" + data)
        },
        getTotalNum() {
            let num = 0
            this.data.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        cancelReturn() {
            this.$refs.popReturnTip.close()
        },
        doReturn() {
            this.cancelReturn()
            let param = {
                orderId: this.data.OrderId,
                remark: this.$refs.returnMsg.getValue(),
            }
            let path = `?orderId=${this.data.OrderId}&remark=${this.$refs.returnMsg.getValue()}`

            OrderRefundApplyExchange(param, path).then((res) => {
                if (res.State == 1 && res.Data && res.Data != 0) {
                    this.easyToast("提交成功")
                    this.upOrderView()
                    setTimeout((e) => {
                        // this.easyGoBack()
                        this.easyGoTo("/pages_shop/packet/refund/detail?id=" + res.Data)
                    }, 800)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        upOrderView() {
            this.UP_RETURN_ORDER_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";
.flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.refund-item {
    .order-item-price {
        align-items: center;
        .order-price {
            display: flex;
            justify-content: flex-start;
        }
    }
}
</style>
